<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <PageTools>
        <template v-slot:after>
          <el-button
            type="primary"
            size="small"
            @click="addPermission(1,'0')"
          >添加权限</el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <el-table row-key="id" :data="PermissionList" border>
        <!-- 循环遍历出表头及内容 -->
        <el-table-column
          v-for="(item,index) in colums"
          :key="index"
          :align="item.align"
          :prop="item.prop"
          :label="item.name"
        >
          <!-- 判断是否要用tag标签 -->
          <template slot-scope="{row}">
            <el-tag v-if="item.prop==='code'">{{ row.code }}</el-tag>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="name" label="名称" />
        <el-table-column align="center" prop="code" label="标识" />
        <el-table-column align="center" prop="description" label="描述" /> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button
              v-if="row.type===1"
              type="primary"
              plain
              size="mini"
              @click="addPermission(2,row.id)"
            >添加</el-button>
            <el-button type="info" plain size="mini" @click="edit(row.id)">编辑</el-button>
            <el-button type="warning " plain size="mini" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <addForm ref="addForm" :show-dialog="showDialog" @updateList="getPermissionList" />
    </div>
  </div>
</template>

<script>
import { getPermissions, delPermission, getPermissionDetail } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
import addForm from '@/views/permissions/components/addForm'
export default {
  components: {
    addForm
  },
  data() {
    return {
      PermissionList: [], // 权限列表
      colums: [
        { name: '名称', prop: 'name', align: 'center' },
        { name: '标识', prop: 'code', align: 'center' },
        { name: '描述', prop: 'description', align: 'center' }
      ], // 表头数据
      showDialog: false// 控制dialog弹窗显示
    }
  },

  created() {
    // 页面一打开就渲染页面
    this.getPermissionList()
  },
  methods: {
    // 编辑事件
    async edit(id) {
      // 打开弹窗
      this.$refs.addForm.showDialog = true
      // 数据回显到弹窗表单上
      this.$refs.addForm.formData = await getPermissionDetail(id)
    },
    // 添加权限
    addPermission(type, pid) {
      // 将type和pid赋值
      this.$refs.addForm.formData.type = type
      this.$refs.addForm.formData.pid = pid
      this.$refs.addForm.showDialog = true
    },
    // 删除事件
    async del(id) {
      try {
        await this.$confirm('确定删除吗') // 弹框确认
        await delPermission(id)// 调用接口
        this.getPermissionList() // 渲染页面
        this.$message.success('删除成功') // 成功提示
      } catch (error) {
        console.log(error)
      }
    },
    // 获取权限列表
    async getPermissionList() {
      // 获取列表后利用转换方法将数据转换为树形结构再赋值到 权限列表里
      this.PermissionList = tranListToTreeData(await getPermissions(), '0')
    }
  }
}
</script>

<style>

</style>
